

<template>
  <div id="app">
    <!-- 查询表单 -->
    <!--    欢迎{{this.user.username}}登录-->
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="姓名">
        <el-input v-model="formInline.name" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="性别">
        <el-select v-model="formInline.sex" placeholder="全部" clearable>
          <el-option label="男" value="男"></el-option>
          <el-option label="女" value="女"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="绑定设备">
        <el-select v-model="formInline.bdsb" placeholder="请选择" clearable>
          <el-option label="电子手表" value="电子手表"></el-option>
          <el-option label="头盔" value="头盔"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="证件号码">
        <el-input v-model="formInline.zjhm" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="通讯地址">
        <el-input v-model="formInline.dz" placeholder="请输入"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="findPage()">查询</el-button>
        <el-button type="primary" @click="qingkong">清空</el-button>
      </el-form-item>
    </el-form>

    <!--    <el-button type="primary" @click="daochu()">导出</el-button>-->

    <!--表格用来展示数据-->
    <el-table
        :data="tableData"
        border
        style="width: 100%">
      <el-table-column
          prop="id"
          label="序号"
      >
      </el-table-column>

      <el-table-column
          prop="name"
          label="姓名"
      >
      </el-table-column>

      <el-table-column
          prop="sex"
          label="性别"
      >
      </el-table-column>

      <el-table-column
          prop="age"
          label="年龄"
      >
      </el-table-column>

      <el-table-column
          prop="zjhm"
          label="证件号码"
      >
      </el-table-column>

      <el-table-column
          prop="qjshijian"
          label="求救时间"
      >
      </el-table-column>
      <el-table-column
          prop="lxhm"
          label="联系电话"
      >
      </el-table-column>
      <el-table-column
          prop="dz"
          label="通讯地址"
      >
      </el-table-column>
      <el-table-column
          label="绑定设备"
      >
        <template slot-scope="scope">
          {{scope.row.bh}}_{{scope.row.bdsb}}
        </template>
      </el-table-column>
      <el-table-column
          label="操作">
        <template slot-scope="scope">
          <el-button type="text" @click="findId(scope.row.id)" size="mini">报警定位</el-button>
          <el-button type="text" @click="Tofwgl(scope.row.id)" size="mini">健康档案</el-button>
          <el-button type="text" @click="findId(scope.row.id)" size="mini">实时定位</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页展示数据-->
    <el-pagination
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>
    <el-dialog title="" :visible.sync="dialogFormVisible">
      <div id="container_1" style="width: 100%; height: calc(100vh - 100px)">
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<style >

</style>

<script>

import axios from "axios"
import AMapLoader from "@amap/amap-jsapi-loader";

export default {
  data(){
    return{
      /*
        data:就是用来定义数据的要用什么就自己定义什么
        []:数组，集合
        {}:对象(里面有属性)
         */
      tableData:[],
      pageNum:1,
      pageSize:10,
      total:0,
      formInline:{},
      user:{},
      roomList:[],
      dialogFormVisible:false,
      infoWindowContent: {
        dqwz:''
      },
      tx:[],
      ruleForm:{},
      ruleForm2:{},
      imageUrl:"",
    }
  },
  methods:{
    /*！！！！！！！！！！！
    methods:这个里面定义的全部都是方法
    现在是spring boot+vue 框架
    不一样的就是在 从vue框架里面的methods里面
    通过方法去请求路径(请求的路径就是后台的路径)
    拿到数据放到下面的created()里面来加载数据才能在页面展示

    ***html使用ajxa 请求controller  controller把数据返回给前端 不再去跳转页面了***

     */
    Tofwgl(id){
      this.$router.push({
        path: '/jkgl1',
        query: {
          id: id,
        }
      })
    },

    Addbz(){
      const marker = new AMap.Marker({
        position: new AMap.LngLat(...[this.longitude, this.latitude]),
        title: '点击我查看数据'
      });
      marker.setMap(this.map);
      const infoWindow = new AMap.InfoWindow({
        content: `<div style="text-align:center;">
姓名：${this.infoWindowContent.name}<br>
设备：${this.infoWindowContent.bh}_${this.infoWindowContent.bdsb}<br>
联系电话：${this.infoWindowContent.lxhm}<br>
地址：${this.infoWindowContent.dz}<br>
当前地址：${this.infoWindowContent.address}<br>
定位状态：${this.infoWindowContent.bindingState==1?"已绑定":"未绑定"}<br>
</div>`, // 弹窗内容
        offset: new AMap.Pixel(0, -30) // 弹窗偏移量
      });
      marker.on('click', () => {
        infoWindow.open(this.map, marker.getPosition());
      });
    },
    findPage(){ //查询所有加分页参数
      this.axios.post(`http://localhost:9007/dwFw/findPage?pageNum=${this.pageNum}&pageSize=${this.pageSize}`,this.formInline).then(res=>{
        console.log(res.data);
        this.tableData=res.data.data.records;
        this.total=res.data.data.total;
      })
    },
    getLocationByCoordinates() {
      // 创建逆地理编码实例
      const geocoder = new AMap.Geocoder();
      // 根据经纬度获取位置信息
      geocoder.getAddress([this.longitude, this.latitude], (status, result) => {
        if (status === 'complete' && result.info === 'OK') {
          this.infoWindowContent.dqwz = result.regeocode.formattedAddress;
        }
      });
    },
    qingkong(){
      this.formInline={};
      this.findPage();
    },
    findId(id){
      this.dialogFormVisible=true
      this.initMap();
      this.axios.post(`http://localhost:9007/dwFw/findId?id=${id}`).then(res=> {
        this.latitude= res.data.data.longitude;
        this.longitude= res.data.data.dimensionality;
        // this.getLocationByCoordinates();
        this.infoWindowContent=res.data.data;
        // this.toAddress();
        this.goToLocation();
        this.Addbz();
        this.findPage();
      });
    },
    initMap(){
      AMapLoader.load({
        key: '090843d2967de6adc0b44ae4f47e9dc0', // 替换为你的API Key
        version: '2.0',
        plugins: ["AMap.Geocoder"]
      }).then(AMap => {
        this.map = new AMap.Map('container_1', {
          zoom: 10,
          center: [127.11, 23.11] // 初始中心点
        });
      }).catch(e => {
        console.error('地图加载失败', e);
      });
    },

    async goToLocation() {
      const [lng, lat] = [this.longitude, this.latitude];
      this.map.setZoom(15); // 设置缩放级别
      this.map.setCenter([lng, lat]);
    },
    handleCurrentChange(val) {//分页方法
      this.current = val;
      this.findPage();
    },
  },
  created() {
    /*
    ！！！！！！！！！！注意created()：
    这个里面才是可以把数据展示到页面的方法
    思考那个方法是要把数据放到前台 就在这个里面写那个方法
     */
    // var userDB=sessionStorage.getItem("userDB"); //从login.html页面的session域中拿到的数据
    // if (userDB==null){
    //   location.href="#/login";
    // }
    // this.user=JSON.parse(userDB);//动态获取显示登录人的数据 因为从session域中拿出来所以要转换数据类型
    this.findPage();//展示所有的数据
    this.initMap();
    // this.xialaList();//动态获取下拉框的数据
  }
}
</script>
